<template>
  <div>
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="name" label="用户" width="210">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar" shape="square" />
          <span style="width: 130px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="绑定手机号" width />
      <el-table-column prop="number" label="反馈次数" width />
      <el-table-column prop="created_at" label="代言时间" width="200" />
      <el-table-column prop="refund_amount" label="退款金额" width />
      <el-table-column prop="created_at" label="申请时间" width="200" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="feedBack" @click="feedBack(scope)">查看代言反馈</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="agree" @click="agree(scope)">同意</span>
          <span class="refuse" @click="refuse(scope)">拒绝</span>
        </template>
      </el-table-column>
    </el-table>
    <Record ref="record" :feed-back-list="feedBackList" />
    <no-pass ref="noPass" @confirm="handleConfirm" />
  </div>
</template>
<script>
import Record from './record'
import NoPass from './noPass'
import { checkFeedBack, modificationRefound } from '@/api/represent'
const ERR_OK = 200
export default {
  components: {
    Record,
    NoPass
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      shopTitle: '负责店铺',
      goodTitle: '现有商品',
      feedBackList: [],
      id: ''
    }
  },
  created() {
    this.setHeight()
  },
  methods: {
    handleConfirm(message) {
      this._modificationRefound({ id: this.id, myType: 2, message })
        .then(() => {
          this.$emit('success')
        })
    },
    feedBack(scope) {
      this.$refs.record.show()
      this.feedBackList = []
      this._checkFeedBack(scope.row.id)
    },
    agree(scope) {
      this._modificationRefound({ id: scope.row.id, myType: 1 })
        .then(() => {
          this.$emit('success')
        })
    },
    refuse(scope) {
      this.$refs.noPass.show()
      this.id = scope.row.id
    },
    setHeight() {
      this.height = document.body.clientHeight - 270
      window.onresize = () => {
        this.height = document.body.clientHeight - 270
      }
    },
    _checkFeedBack(id) {
      checkFeedBack(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.feedBackList = res.data
            console.log(this.feedBackList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _modificationRefound({ id, myType, message }) {
      return modificationRefound({ id, myType, message })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .feedBack, .agree, .refuse {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .refuse{
    color: #F56C6C;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row td {
  &:nth-child(7) {
    color: #409eff;
    cursor: pointer;
    span {
      width: 50px;
    }
  }
}
</style>
